<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="工作台">
        <n-grid cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen">
          <n-gi>
            <div class="flex items-center">
              <div>
                <n-avatar circle :size="64" :src="Avatar" />
              </div>
              <div>
                <p class="px-4 text-xl"><show />{{ userS }}，开始您的工作吧！</p>
                <p class="px-4 text-gray-400">你存的不是钱，而是你的底气！</p>
              </div>
            </div>
          </n-gi>
          <n-gi>
            <div class="flex justify-end w-full">
              <div class="flex flex-1 flex-col justify-center text-right">
                <span class="text-secondary">任务</span>
                <span class="text-2xl">{{ Tasks.count }}</span>
              </div>
              <div class="flex flex-1 flex-col justify-center text-right">
                <span class="text-secondary">标签</span>
                <span class="text-2xl">{{ Memos.count }}</span>
              </div>
              <div class="flex flex-1 flex-col justify-center text-right">
                <span class="text-secondary">签到</span>
                <span class="text-2xl">35</span>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </n-card>
    </div>
    <n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
      <n-gi>
        <n-card
          :segmented="{ content: true }"
          content-style="padding: 0;"
          :bordered="false"
          size="small"
          title="任务"
        >
          <template #header-extra> <DrawerRight /></template>
          <div class="flex flex-wrap project-card">
            <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
              v-for="task in Tasks.task"
              :key="task.id"
            >
              <!-- <div class="flex"> -->
              <!-- <span>
                  <n-icon size="30">
                    <GithubOutlined />
                  </n-icon>
                </span> -->
              <!-- <span class="text-lg ml-4">{{ task.title }}</span> -->
              <!-- </div> -->
              <span class="text-lg ml-4">{{ task.title }}</span>
              <div class="flex mt-2 h-10 text-gray-400">{{ task.content }} </div>
              <div class="flex mt-2 h-10 text-gray-400"
                >{{ format(new Date(task.finish_time), 'yyyy-MM-dd HH:mm:ss') }}
              </div>
            </n-card>
            <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
            >
              <div class="flex">
                <span class="text-lg ml-4"></span>
              </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
            </n-card>
            <!-- <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
            >
              <div class="flex">
                <span>
                  <n-icon size="30" color="#e44c27">
                    <Html5Outlined />
                  </n-icon>
                </span>
                <span class="text-lg ml-4">Html5</span>
              </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
            </n-card>
            <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
            >
              <div class="flex">
                <span>
                  <n-icon size="30" color="#dd0031">
                    <LogoAngular />
                  </n-icon>
                </span>
                <span class="text-lg ml-4">Angular</span>
              </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
            </n-card>
            <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
            >
              <div class="flex">
                <span>
                  <n-icon size="30" color="#61dafb">
                    <LogoReact />
                  </n-icon>
                </span>
                <span class="text-lg ml-4">React</span>
              </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
            </n-card>
            <n-card
              size="small"
              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
              hoverable
            >
              <div class="flex">
                <span>
                  <n-icon size="30">
                    <LogoJavascript />
                  </n-icon>
                </span>
                <span class="text-lg ml-4">Js</span>
              </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
              <div class="flex mt-2 h-10 text-gray-400"> </div>
            </n-card> -->
          </div>
        </n-card>

        <n-card
          :segmented="{ content: true }"
          content-style="padding-top: 0;padding-bottom: 0;"
          :bordered="false"
          size="small"
          title="标签"
          class="mt-4"
        >
          <template #header-extra> <Calendars /></template>
          <n-list>
            <n-list-item v-for="memo in Memos.memos" :key="memo.id">
              <n-thing :title="memo.title">
                <template #description>
                  <p>{{ memo.content }}</p>
                  <p class="text-xs text-gray-500">{{
                    format(new Date(memo.found_time), 'yyyy-MM-dd HH:mm:ss')
                  }}</p>
                </template>
              </n-thing>
            </n-list-item>
            <!-- <n-list-item>
              <template #prefix>
                <n-avatar circle :size="40" :src="Avatar" />
              </template>
              <n-thing title="">
                <template #description>
                  <p class="text-xs text-gray-500"></p>
                </template>
              </n-thing>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-avatar circle :size="40" :src="schoolboy" />
              </template>
              <n-thing title="">
                <template #description>
                  <p class="text-xs text-gray-500"></p>
                </template>
              </n-thing>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-avatar circle :size="40" :src="schoolboy" />
              </template>
              <n-thing title="">
                <template #description>
                  <p class="text-xs text-gray-500"></p>
                </template>
              </n-thing>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-avatar circle :size="40" :src="schoolboy" />
              </template>
              <n-thing title="">
                <template #description>
                  <p class="text-xs text-gray-500"></p>
                </template>
              </n-thing>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-avatar circle :size="40" :src="schoolboy" />
              </template>
              <n-thing title="">
                <template #description> </template>
              </n-thing>
            </n-list-item> -->
          </n-list>
        </n-card>
      </n-gi>
      <n-gi>
        <Weather />
        <n-card
          :segmented="{ content: true }"
          content-style="padding: 0;"
          :bordered="false"
          size="small"
          title="快捷操作"
        >
          <div class="flex flex-wrap project-card">
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="#68c755">
                    <DashboardOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: '/setting', name: 'Setting' })"
                  >设置页面</span
                >
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="#fab251">
                    <ProfileOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: 'table', name: `routeName_table` })"
                  >审批管理</span
                >
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="#1890ff">
                    <FileProtectOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: '/form', name: 'Form' })"
                  >表单页面</span
                >
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="#f06b96">
                    <ApartmentOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: '/result', name: 'Result' })"
                  >员工列表</span
                >
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="#7238d1">
                    <SettingOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: 'role', name: 'system_role' })"
                  >角色权限管理</span
                >
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
                  <n-icon size="30" color="">
                    <DashboardOutlined />
                  </n-icon>
                </span>
                <span
                  class="text-lx text-center"
                  @click="$router.push({ path: 'basic-list', name: 'basic-list' })"
                  >基础列表</span
                >
              </div>
            </n-card>
          </div>
        </n-card>
        <n-card
          :segmented="{ content: true }"
          content-style="padding-top: 0;padding-bottom: 0;"
          :bordered="false"
          size="small"
          title="考勤"
          class="mt-4"
        >
          <template #header-extra><DrawerLeft /></template>
          <div style="margin-bottom: 2rem">
            <n-button color="#8a2be2" style="margin: 0rem 8rem">
              <template #icon> </template>
              上班打卡
            </n-button>
            <n-button color="#ff69b4">
              <template #icon> </template>
              下班打卡
            </n-button>
          </div>

          <n-list style="display: flex" class="m-7">
            <n-thing title="ID" style="margin-left: 1rem">
              <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
                <p>{{ attend.id }}</p>
              </n-list-item>
            </n-thing>
            <n-thing :title="a" style="margin-left: 1rem">
              <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
                <p> {{ format(new Date(attend.startWork), 'yyyy-MM-dd HH:mm:ss') }}</p>
              </n-list-item>
            </n-thing>
            <n-thing title="下班时间" style="margin-left: 1rem">
              <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
                <p> {{ format(new Date(attend.offDuty), 'yyyy-MM-dd HH:mm:ss') }}</p>
              </n-list-item>
            </n-thing>
          </n-list>
        </n-card>
      </n-gi>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
  // import schoolboy from '@/assets/images/schoolboy.png';
  import show from '@/views/dashboard/workplace/show.vue';
  import {
    DashboardOutlined,
    ProfileOutlined,
    FileProtectOutlined,
    SettingOutlined,
    ApartmentOutlined,
  } from '@vicons/antd';
  import { format } from 'date-fns';
  import Calendars from '@/views/dashboard/workplace/Calendares.vue';
  import DrawerRight from '@/views/dashboard/workplace/DrawerRight.vue';
  import DrawerLeft from '@/views/dashboard/workplace/DrawerLeft.vue';
  import Weather from '@/views/dashboard/workplace/Weather.vue';
  import { useUserStore } from '@/store/modules/user';
  //获取task的总数
  import { taskStore, memoStore } from '@/store/modules/task';
  const a = '上班时间';
  //查询考勤情况
  import { AttendanceStore } from '@/store/modules/attend';
  const Attends = AttendanceStore();
  Attends.search();

  const Tasks = taskStore();
  Tasks.search();
  const Memos = memoStore();
  Memos.searches();
  const userStore = useUserStore();
  const userS = userStore.$state.info.name;

  const Avatar = userStore.$state.user.user.avatar;
</script>

<style lang="less" scoped>
  .project-card {
    margin-right: -6px;

    &-item {
      margin: -1px;
      width: 33.333333%;
    }
  }
</style>
